<template>
  <el-dialog v-if="dialog" :close-on-click-modal="false" :visible.sync="dialog" class="menu-mange" title="菜单管理" width="50%">
    <div>
      <vxe-table
        ref="treeTable"
        :data="list"
        :auto-resize="true"
        resizable
        row-id="id"
        :checkbox-config="{checkRowKeys: defaultSelecteRows}"
        tree-config
        border
        highlight-hover-row
        highlight-current-row
        height="410"
      >
        <vxe-table-column type="checkbox" field="checked" width="40" />
        <vxe-table-column tree-node field="name" min-width="300" title="名称" />
        <vxe-table-column field="remark" min-width="300" title="备注" />
      </vxe-table>
    </div>
    <div slot="footer" class="clearfix">
      <el-button class="mb16 fr clearfix" @click="dialog = false">取 消</el-button>
      <el-button class="mb16 fr clearfix" type="primary" @click="saveMenu()">保存</el-button>
    </div>

  </el-dialog>
</template>

<script>
import { getMenu } from '@/api/public'
import { searchStoreRoleJurisdiction, edutStoreRoleJurisdiction } from '@/api/store'
export default {
  props: {
    id: {
      required: true,
      type: String
    }
  },
  data() {
    return {
      list: [],
      dialog: false,
      defaultSelecteRows: []
    }
  },
  watch: {
    dialog(newValue, oldValue) {
      this.defaultSelecteRows = []
      this.list = []
      if (newValue) {
        this.queryById()
      }
    }
  },
  methods: {
    getList() {
      getMenu({ module: 'SHOP' }).then(res => {
        this.list = res
        this.$refs.treeTable.reloadData(this.list)
      })
    },
    queryById() {
      searchStoreRoleJurisdiction({ roleId: this.id }).then(res => {
        this.defaultSelecteRows = JSON.parse(JSON.stringify(res))
        this.getList()
      })
    },
    saveMenu() {
      const selectRecords = this.$refs.treeTable.getCheckboxRecords()
      const ids = []
      selectRecords.forEach(item => {
        if (!item.children || (item.children && item.children.length === 0)) {
          ids.push(item.id)
        }
      })
      edutStoreRoleJurisdiction({ roleId: this.id, permissionIds: ids }).then(res => {
        this.dialog = false
        this.$message.success('修改成功')
      })
    }
  }
}
</script>

<style lang="scss">
.menu-mange {
}
</style>
